<template>
    <div >
        <div>
         <Table  stripe border :columns="columns" :data="data1" ref="selection"  @on-selection-change="selectList"></Table>
         <Button @click="handleSelectAll(true)" size="large">全选</Button>
        <Button @click="handleSelectAll(false)" size="large">取消全选</Button>
        <Button @click="del" size="large">删除选中项</Button>
        <Button  size="large" @click="exportData"><Icon type="ios-download-outline"></Icon>导出数据</Button>
       <!--   <Button @click="add">添加数据</Button> -->
    </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      selectIds: [],
      disabled: false,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "用户名",
          key: "teacherName"
        },
        {
          title: "教师工号",
          key: "teacherId"
        },
        {
          title: "专业",
          key: "major"
        },
       {   
          title: "科目",
          key: "project"
        },
        {
          title: "密码",
          key: "teacherPwd"
        },
        {
          title: "电子邮件",
          key: "mail"
        },
        {
          title: "电话",
          key: "mobile"
        },
        {
          title: "性别",
          key: "gender"
        },
        {
          title: "注册日期",
          key: "date"
        },

        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "视图"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: []
    };
  },
  beforeMount() {
    this.$axios({
      method: "post",
      url: "http://"+this.urlpath+"/FindAllT"
    }).then(res => {
      this.data1 = res.data;
    });
  },

  methods: {
    show(index) {
      this.$Modal.info({
        title: "教师信息",
        content: `用户名：${this.data1[index].teacherName}<br>
           教师工号：${this.data1[index].teacherId}<br>
           密码：${this.data1[index].teacherPwd}
        <br>专业：${this.data1[index].major} <br>
        课程：${this.data1[index].project} <br>
        电话：${this.data1[index].mobile} <br>
        电子邮件：${this.data1[index].mail}<br>
         性别：${this.data1[index].gender}<br>
         注册日期：${this.data1[index].date}`
      });
    },
    remove(index) {
      var idone = [];
      idone.push(this.data1[index]._id);
      this.data1.splice(index, 1);
      this.$axios({
        method: "post",
        url: "http://"+this.urlpath+"/RemoveT",
        data: idone
      }).then(res => {});
    },
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    },

    selectList(selection) {
      if (selection.length > 0) {
        this.disabled = false;
        this.selectIds = []; /* 把上次点击的去掉，否则会叠加 */
        for (let i = 0; i < selection.length; i++) {
          this.selectIds.push(selection[i]._id);
        }
      } else {
        this.disabled = true;
      }
    },
    exportData(){
      this.$refs.selection.exportCsv({
                        filename: '教师信息'
                    });
    },
    del() {
      for (let i = 0; i < this.selectIds.length; i++) {
        var deleteId = this.data1.findIndex(item => {
          return item._id === this.selectIds[i];
        });
        this.data1.splice(deleteId, 1);
      }

      this.$axios({
        method: "post",
        url: "http://"+this.urlpath+"/RemoveT",
        data:this.selectIds
      }).then(res => {});
    }
  }
};
</script>
<style scoped>
</style>